<template>
	<div class="footer" v-if="loginShow">
		<div class="fin">
			<div class="inner">
				<div class="ft flex">
					<div class="ftl">
						<div class="flogo">
							<img :src="info.logo" alt="">
						</div>

						<div v-html="contactInfo.content"></div>
						<!--                        <ul class="ul f18">
                            <li v-if="info.tel">Tel: {{ info.tel }}</li>
                            <li v-if="info.email">Email: {{ info.email }}</li>
                            <li v-if="info.address">Address: {{ info.address }}</li>
                        </ul>
                        <div class="socail flex">
                            <a v-if="info.linkedin" :href="info.linkedin" class="i" target="_blank"><i
                                    class="iconfont icon-bxl-linkedin"></i></a>
                            <a v-if="info.twitter" :href="info.twitter" class="i" target="_blank"><i
                                    class="iconfont icon-Twitter"></i></a>
                            <a v-if="info.facebook" :href="info.facebook" class="i" target="_blank"><i
                                    class="iconfont icon-Facebook"></i></a>
                            <a v-if="info.instagram" :href="info.instagram" class="i" target="_blank"><i
                                    class="iconfont icon-instagram-fill"></i></a>
                        </div> -->
					</div>
					<div class="ftr">
						<div class="fnav flex f20">
							<a :href="item.outlink" v-for="(item,index) in navList" :key="index">
								{{item.name}}
							</a>
						</div>
						<div class="subscribe">
							<div class="tit f28">{{ info.subscribeTitle }}</div>
							<div class="inp flex">
								<div class="in"><input type="text" v-model="form.email"></div>
								<div class="btn" @click="subscribe">发送</div>
							</div>
						</div>
					</div>
				</div>
				<div class="fb flex f16">
					<div class="copyright" v-html="copyrightInfo.content"></div>
					<div class="flinks">
						<a :href="item.outlink" v-for="(item,index) in otherList" :key="index">
							{{item.name}}
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		getArticleLists,
		getCloumnList,
		getCategoryList,
		subscribe_email
	} from '@/api/sections'
	import {
		zhTranBody
	} from '@/api/stChinese.js'
	export default {
		setup() {
			const info = {
				logo: '/uploadfiles/logo.png',
				tel: '+852 3943 3798',
				email: 'zhangyf@cuhk.edu.hk',
				address: '8th Floor, Lo Kwee-Seong Integrated Biomedical Sciences BuildingArea 39, The Chinese University of Hong KongShatin, N.T., Hong Kong',
				copy: 'Copyright © 2024 AITEP All Rights Reserved. Guangdong ICP100593 ',
				design: 'Designed by Wanhu.',
				linkedin: '/',
				twitter: '/',
				facebook: '/',
				instagram: '/',
				subscribeTitle: "不要錯過我們的更新！ 訂閱我們的時事通訊。"
			};
			return {
				info
			}
		},
		data() {
			return {
				form: {
					email: ''
				},
				navList: [],
				copyrightInfo: {},
				otherList: [],
				contactInfo: {},
				loginShow: true
			}
		},

		methods: {
			subscribe: function() {
				var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9.]+\.([a-zA-Z]{2,4})$/;
				if (!reg.test(this.form.email)) {
					ElMessage({
						message:'Please enter the correct email address',
						type: 'error'
					});
					return
				};
				subscribe_email({
					email: this.form.email
				}).then((res) => {
					if (res.code == 1) {
						this.form.email = ''
						ElMessage({
							message: res.msg,
							type: 'success'
						});
					} else {
						ElMessage({
							message: res.msg,
							type: 'error'
						});
					}
				})
			},
			login: function() {
				if (
					this.$route.path == "/login" ||
					this.$route.path == "/login/binding" ||
					this.$route.path == "/login/forgot" ||
					this.$route.path == "/login/QRcode" ||
					this.$route.path == "/login/register"
				) {
					this.loginShow = false;
				}else{
					this.loginShow = true;
				}
			}
		},
		mounted: function() {

			getArticleLists({
				'cid': 1430,
				ext: 'content'
			}).then((res) => {

				this.contactInfo = res.data[0]

			})
			getArticleLists({
				'cid': 1468,
				ext: 'content'
			}).then((res) => {

				this.copyrightInfo = res.data[0]

			})

			getCloumnList({
				'id': 1467
			}).then((res) => {
				console.log(res, 1111)
				this.navList = res.data
				setTimeout(() => {
					zhTranBody()
				}, 100)

			})
			getCloumnList({
				'id': 1469
			}).then((res) => {
				console.log(res, 1111)
				this.otherList = res.data

			})
			this.login();
			watch(
				() => this.$route.path,
				(newPath, oldPath) => {
					this.login();
				}
			);
		},
	}
</script>